<template>
    <div>
        <div class="title">日志提交记录</div>
        <div class="log_container" v-loading="loading">
            <LogCard v-for="item in logList" :key="item.id" :logInfo="item" @click="goLogDetail(item)" />
        </div>
        <el-pagination
            v-model:current-page="params.pageNo"
            :page-sizes="[5, 7, 9, 11]"
            v-model:page-size="params.limit"
            layout="prev,pager,next,jumper,->,sizes,total"
            :total="total"
            background
            @current-change="getLogList"
            @size-change="getLogList"
        ></el-pagination>
        <log-detail v-model="visible" :logId="currentLogId" :logUser="logUserId" @delete="getLogList"></log-detail>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from "vue";
import { reqLogList } from "@/api/log";
import type { LogPreview, LogListForm } from "@/api/log/type";
import { ElMessage } from "element-plus";
import useSubjectStore from "@/store/modules/subject";
// 获取组件
import LogCard from "./logCard.vue";
// 获取异步组件
const LogDetail = defineAsyncComponent(() => import("./logDetail.vue"));
// 获取课题仓库
const subjectStore = useSubjectStore();
// 日志内容
const logList = ref<LogPreview[]>([]);
// 定义请求体
const params = ref<LogListForm>({
    subject_id: subjectStore.currentId,
    pageNo: 1,
    limit: 5,
});
// 定义加载态
const loading = ref(false);
const total = ref(0);
// 获取日志列表
const getLogList = async (pager = 1) => {
    loading.value = true;
    params.value.pageNo = pager;
    const res = await reqLogList(params.value);
    if (res.code === 200 && typeof res.data === "object") {
        logList.value = res.data.list;
        total.value = res.data.total;
    } else {
        ElMessage.error(res.message);
    }
    loading.value = false;
};
// 对话框可见性
const visible = ref(false);
// 定义数据
const currentLogId = ref(0);
const logUserId = ref(0);
// 查看日志详情
const goLogDetail = (log: LogPreview) => {
    visible.value = true;
    currentLogId.value = log.id;
    logUserId.value = log.user.id;
};
// 挂载时获取日志列表
onMounted(() => {
    getLogList();
});
</script>

<style lang="scss" scoped>
// 模拟descriptions中header的样式
.title {
    font-size: 16px;
    font-weight: 700;
    color: var(--el-text-color-primary);
    margin-bottom: 20px;
}

.log_container {
    display: flex;
    flex-wrap: wrap;

    margin-bottom: 30px;
}
</style>
